<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">四宫格</router-link> |
      <router-link to="/about">八宫格</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {
    return {
    }
  },
  created () {
    this.getSetting()

    if (!JSON.parse(localStorage.getItem('tq'))) {
      console.log('第一次调用天气 和 时间戳')
      this.tianqi()
      this.setsjc()
    }
    if (JSON.parse(localStorage.getItem('tq'))) {
      if (JSON.parse(localStorage.getItem('sjc') - Date.now()) > 7200000) {
        console.log('大于两个小时再调用天气 和时间戳')
        this.tianqi()
        this.setsjc()
      }
    }
  },
  mounted () {
    this.setsjc()
  },
  methods: {
    // 调用接口获取实时天气数据
    tianqi () {
      this.$http.get('https://www.tianqiapi.com/api?version=v6&appid=21375891&appsecret=fTYv7v5E&city=%E5%A2%9E%E5%9F%8E')
        .then(res => {
          localStorage.setItem('tq', JSON.stringify(res))
          // console.log('当前温度为：', res.data.tem)
          // console.log('当前天气情况为：', res.data.wea)
          // console.log('实时天气提示您：', res.data.air_tips)
          // console.log('天气更新时间为：', res.data.update_time)
          // console.log('错误消息', res.data.errmsg)
        })
        .catch(err => { console.log(err) })
    },
    // 获取 星期- 2022-08-08 08:00 格式
    getSetting () {
      // 获取今天是星期几
      const day = new Date(new Date()).getDay()
      const weeks = ['日', '一', '二', '三', '四', '五', '六']

      // 获取今日日期
      const date = new Date()
      const year = date.getFullYear() // 获取完整的年份(4位)
      let month = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
      let strDate = date.getDate() // 获取当前日(1-31)
      if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
      if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
      const currentdate = `${year}-${month}-${strDate} `

      // 获取当前小时
      // 时 getHours()：(0 ~ 23)
      var hour = date.getHours()
      // 分 getMinutes()： (0 ~ 59)
      var minute = date.getMinutes()

      localStorage.setItem('setting', JSON.stringify({ data: { date: currentdate, week: weeks[day], xs: this.addZero(hour) + ':' + this.addZero(minute) } }))
    },
    // 设置时间戳
    setsjc () {
      localStorage.setItem('sjc', JSON.stringify({ sjc: Date.now() }))
    },
    // 小于10的拼接上0字符串
    addZero (s) {
      return s < 10 ? ('0' + s) : s
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
  background-color: rgb(255, 255, 255);

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
